@primary:#1DA57A;
.nav_box{
    width: 100%;
    margin-top: 52px;
    overflow: hidden;
    header{
        width: 100%;
        display: grid;
        grid-template-columns: 50px auto 50px;
        column-gap: 10px;
        grid-auto-flow: row dense;
        align-items: center;
        position: fixed;
        top: 0;
        background-color:#fff;
        z-index: 10;
        .logo{
            grid-column: 2 / 3;
            justify-self: center;
            font-size: 24px;
            color: @primary;
            cursor: pointer;
        }
        .user{
            grid-column: 3 / 4;
        }
        .create_article{
            display: none;
        }
        .search{
            display: none;
        }
        .menu{
            grid-column: 1 / 2;
            max-width: 50px;
            ul{
                border-bottom: 0 solid #000 !important;
            }
        }
    }
}

@media screen and (min-width:992px) {
    .nav_box{
        header{
            grid-template-columns: 50px auto 200px 100px 50px;
            .logo{
                grid-column: 1 / 2;
                justify-self: end;
                position: relative;
                left: 10px;
            }
            .user{
                grid-column: 5 / 6;
            }
            .search{
                display: block;
                grid-column: 3 / 4;
            }
            .create_article{
                grid-column: 4 / 5;
                display: block;
            }
            .menu{
                grid-column: 2 / 3;
                max-width: 630px;
                ul{
                    border-bottom: 1px solid #f0f0f0 !important;
                }
            }
        }
    }
}

@media screen and (min-width:1200px) {
    .nav_box{
        header{
            .menu{
                grid-column: 2 / 3;
                max-width: 900px;
                ul{
                    border-bottom: 1px solid #f0f0f0 !important;
                }
            }
        }
    }
}